<template>
  <div class="following-page">
    <div class="top-tabs">
      <a class="tab" :class="{ 'active': tab == 1 }" @click="chooseTab(1)">我关注的作者</a>
      <a class="tab" :class="{ 'active': tab == 2 }" @click="chooseTab(2)">我关注的收藏夹</a>
    </div>
    <template v-if="tab == 1">
      <div class="m-at-con-wrap" v-if="fans.length > 0">
        <div class="ltr">
          <a class="cover-all first-all"
            :class="{ 'active': !selectUserId && fans[0].bloggerId, 'no-data': !fans[0].bloggerId }" href="/exclusiveSetting"
            @click.prevent="showAll">
            <div class="img-wrap">
              <span class="f-img" v-for="i in (fans.length > 4 ? 4 : fans.length)">
                <img loading="lazy" :srcset="fans[i - 1].srcsets" v-lazy="fans[i - 1].lazy" @error="loadError"
                  v-if="fans.length > 0 && fans[i - 1].bloggerId" />
              </span>
              <!-- <span class="f-img">
                <img loading="lazy" :srcset="fans[1].srcsets" v-lazy="fans[1].lazy" @error="loadError" v-if="fans.length>1&&fans[1].bloggerId"/>
              </span>
              <span class="f-img">
                <img loading="lazy" :srcset="fans[2].srcsets" v-lazy="fans[2].lazy" @error="loadError" v-if="fans.length>2&&fans[2].bloggerId"/>
              </span>
              <span class="f-img">
                <img loading="lazy" :srcset="fans[3].srcsets" v-lazy="fans[3].lazy" @error="loadError" v-if="fans.length>3&&fans[3].bloggerId"/>
              </span> -->
            </div>
            <span class="title">全部关注</span>
          </a>
          <div class="c-aten-datas">
            <pswiper wrapclass="user-swp-wrap" ref="refuserSwp" :betn="46" :slides="12" prevclass="follow-page-prev"
              nextclass="follow-page-next" id="userSwp">
              <a class="swiper-slide cover-all li-cover-all"
                :class="{ 'active': item.blogger&&selectUserId ==  item.blogger.id, 'no-data': !item.blogger }"
                v-for="(item, idx) in fans" :key="idx">
                <template v-if="item.blogger">
                  <span class="img-wrap">
                    <img loading="lazy" class="avatar" :srcset="item.srcsets" v-lazy="item.lazy" @error="loadError"  @click.stop="chooseUser(item.blogger)"/>
                    <a class="take-def" :href="'/user/' + item.bloggerId" @click.prevent="toUserCenter(item.bloggerId)"></a>
                  </span>
                  <a class="title">{{ item.bloggerName }}</a>
                </template>
              </a>
            </pswiper>
          </div>
        </div>
        <router-link to="/exclusiveSetting" class="mgr-at-btn" v-if="fans.length > 0 && fans[0].bloggerId">管理</router-link>
      </div>
      <div class="sub-page-tit" v-if="list.length > 0">
        <div class="txt">来自你关注人的内容</div>
        <div class="filter-bx" v-if="false">
          <div class="mk-cus-ddl">
            <span class="cur">全部</span>
            <div class="sub-dd-block">
              <ul class="sub-ddls">
                <li><a>全部</a></li>
                <li><a>图集</a></li>
                <li><a>单图</a></li>
                <!-- <li><a>短视频</a></li> -->
              </ul>
            </div>
          </div>
        </div>
      </div>

      <ul class="mk-rd-datas">
        <!-- <WaterfallFlowImgList id="1" :list="list" :columns="6" /> -->
        <div class="games">
            <a class="fav-d-item" :class="{'no-data':!item.id}" v-for="(item, i) in list" @click.prevent="()=>{return false;}" 
                :key="i">
                <template v-if="item.id">
                  <div class="img-flex-box">
                      <div class="main-img">
                          <img loading="lazy" :srcset="item.srcsets" v-lazy="item.lazy" @error="loadError" @click.stop="toInfo(item)"
                              alt="" />
                              
                          <div class="cate-dsc">{{item.device}}{{item.categoryName?(item.device?' · ':'')+item.categoryName:''}}{{item.style?' · '+item.style:''}}{{item.era?' · '+item.era:''}}</div>
                      </div>
                  </div>
                  <div class="bot-desc">
                      <span class="file-name">{{ item.title }}</span>
                      <span class="type-text">{{ infoUrlEnum[item.categoryTopId].name}}</span>
                      <!-- <span class="type-text">{{item.article.categoryTopId}}</span> -->
                  </div>
                  <div class="bot-author" v-if="item.member">
                      <a class="u" @click.stop="toUsercenter(item.member.id)">
                          <span class="img-box">
                              <img loading="lazy" v-aimgd="{ avatar: item.member.avatar, id: item.member.id, w: 20, name: item.member.userName }" />
                          </span>
                          <span class="name">{{ item.member.userName }}
                            
                            <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover"  v-for="tag in item.member.tagsList">
                                                <i class="sm-tip" slot-content>{{tag.title}}</i>
                                                <img slot="reference" loading="lazy" class="u-m-tag" :src="tag.image" alt="">
                                                </el-popover>
                          </span>
                      </a>
                      <div class="rt">
                        <span class="like-num">{{item.praiseStr}}</span>
                        <span class="vnum">{{item.seeStr}}</span>
                      </div>
                  </div>
                </template>
            </a>
        </div>
        <div class="pro-bot-loading" v-if="isloading">
          <i class="el-icon-loading"></i>
        </div>
        <div class="no-more-text" v-if="!hasMore && !isloading && list.length > 0">没有更多了</div>

        <div class="web-data-error" v-if="isDataError">
          <div class="tip-text">别走开刷新一下，有所爱才有所期待～</div>
          <div class="options">
            <a class="go-back" href="/">返回首页</a>
            <a class="click-refresh" @click="isDataError = false; handleSearch();">点击刷新</a>
          </div>
        </div>
        <Empty text="没有找到符合条件的结果~" v-if="!isloading && list.length == 0 && !isDataError" />
      </ul>
    </template>
    <template v-if="tab == 2">
      <ul class="atlas-layout-column">
        <a class="fav-d-item" :class="{ 'no-data': !f.memberExplorer }" v-for="(f, i) in folders" :key="i"
          :href="f.memberExplorer ? nextPageEnum[f.memberExplorer.type] + '/' + f.memberExplorer.id : '#'"
          @click.prevent="toFoldInfo(f.memberExplorer)">
          <template v-if="f.memberExplorer">
            <div class="top-b">
              <div class="img-flex-box">
                <div class="lt-img">
                  <img loading="lazy" v-if="f.memberExplorer.collectList && f.memberExplorer.collectList.length > 0"
                    :srcset="f.memberExplorer.collectList[0].srcsets" v-lazy="f.memberExplorer.collectList[0].lazy"
                    @error="loadError" />
                </div>
                <div class="rt-img">
                  <div class="next-img">
                    <img loading="lazy" v-if="f.memberExplorer.collectList && f.memberExplorer.collectList.length > 1"
                      :srcset="f.memberExplorer.collectList[1].srcsets" v-lazy="f.memberExplorer.collectList[1].lazy"
                      @error="loadError" />
                  </div>
                  <div class="last-img">
                    <img loading="lazy" v-if="f.memberExplorer.collectList && f.memberExplorer.collectList.length > 2"
                      :srcset="f.memberExplorer.collectList[2].srcsets" v-lazy="f.memberExplorer.collectList[2].lazy"
                      @error="loadError" />
                  </div>
                </div>
              </div>
              <div class="bot-desc">
                <span class="file-name" :title="f.memberExplorer.title">{{ f.memberExplorer.title }}</span>
                <span class="file-num">{{ f.memberExplorer.num }} 收藏</span>
              </div>
              <div class="typename-box">
                <span class="type-name" :class="['ftp_' + f.memberExplorer.type]">{{ folderTypeEnum[f.memberExplorer.type]
                  }}</span>
              </div>
            </div>
            <!-- <a class="follow-btn" :class="{ 'active': f.isSubscribe > 0 }" @click.stop="handleFollowFolder(f)">{{
              f.isSubscribe > 0 ? '已关注' : '关注收藏夹' }}</a> -->
          </template>
        </a>
      </ul>
      <div class="no-more-text" v-if="!hasMore && !isloading && folders.length > 0">没有更多了</div>
    </template>
    <template>
      <template v-if="tab == 1&&fans.length==0">
        <div class="sub-tj-row">为你推荐</div>
        <div class="users">
          <div class="user-item" :class="{ 'no-data': item.id }" v-for="(item, i) in recommends" :key="i">
            <template v-if="item.id">
              <a class="img-box" :href="'/user/' + item.id" target="_blank">
                <img loading="lazy" v-aimgd="{ avatar: item.avatar, id: item.id, w: 100, name: item.userName }" />
              </a>
              <a class="name" :href="'/user/' + item.id" target="_blank">{{ item.userName }}</a>
              <div class="nums">
                <span>{{ item.fansStr }} 粉丝</span>
                <span>{{ item.seeStr }} 人气</span>
              </div>
              <div class="addr" v-if="item.province">{{ item.province }} | {{ item.city }}</div>
              <div class="addr" v-else></div>
              <div class="stip" v-if="item.updateTimeStr">{{ item.updateTimeStr }} 新增了发布</div>
              <a class="follow-btn" :class="[item.isSubscribe == 1 ? 'active' : '']" @click="handleFollow(item)">{{
                item.isSubscribe == 1 ? '已关注' : '关注' }}</a>
            </template>
          </div>
        </div>
        <div class="pro-bot-loading" v-if="isloadingrecommend">
          <i class="el-icon-loading"></i>
        </div>
      </template>
      <template v-if="tab == 2">
        <div class="sub-tj-row" v-if="!hasMore">为你推荐</div>
        <ul class="atlas-layout-column">
          <a class="fav-d-item" :class="{ 'no-data': !f.id }" v-for="(f, i) in recommends"
            :href="f.id ? nextPageEnum[f.type] + '/' + f.id : '#'" :key="i" @click.prevent="() => { return false; }">
            <template v-if="f.id">
              <div class="top-b" @click.prevent="toFoldInfo(f)">
                <div class="img-flex-box">
                  <div class="lt-img">
                    <img loading="lazy" v-if="f.collectList && f.collectList.length > 0" :srcset="f.collectList[0].srcsets"
                      v-lazy="f.collectList[0].lazy" @error="loadError" />
                  </div>
                  <div class="rt-img">
                    <div class="next-img">
                      <img loading="lazy" v-if="f.collectList && f.collectList.length > 1" :srcset="f.collectList[1].srcsets"
                        v-lazy="f.collectList[1].lazy" @error="loadError" />
                    </div>
                    <div class="last-img">
                      <img loading="lazy" v-if="f.collectList && f.collectList.length > 2" :srcset="f.collectList[2].srcsets"
                        v-lazy="f.collectList[2].lazy" @error="loadError" />
                    </div>
                  </div>
                </div>
                <div class="bot-desc">
                  <span class="file-name" :title="f.title">{{ f.title }}</span>
                  <span class="file-num">{{ f.num }} 收藏</span>
                </div>
                <div class="typename-box">
                  <span class="type-name" :class="['ftp_' + f.type]">{{ folderTypeEnum[f.type] }}</span>
                </div>
              </div>
              <a class="follow-btn" :class="{ 'active': f.isSubscribe > 0 }" @click.prevent="handleFollowFolder(f)">{{
                f.isSubscribe > 0 ? '已关注' : '关注收藏夹' }}</a>
            </template>
          </a>
        </ul>
        
        <div class="pro-bot-loading" v-if="isloadingrecommend">
          <i class="el-icon-loading"></i>
        </div>
      </template>
    </template>

    <el-drawer :with-header="false" destroy-on-close :modal="false" append-to-body  :visible.sync="showInfo" direction="btt">
        <!-- 游戏详情 -->
        <gameInfo @close="onInfoClose" v-if="pageType=='game'" :id="currentId"/>
        <!-- 作品详情 -->
        <workInfo @close="onInfoClose" v-else-if="pageType=='work'" :id="currentId"/>
        <!-- 文章详情 -->
        <articleInfo @close="onInfoClose" v-else-if="pageType=='article'" :id="currentId"/>
    </el-drawer>
  </div>
</template>
<script>
import gameInfo from '@/components/gameInfo'
import articleInfo from '@/components/articleinfo'
import workInfo from '@/components/workinfo'

import Empty from '@/components/Empty'
import pswiper from '@/components/pswiper'
import WaterfallFlowImgList from '@/components/WaterfallFlowImgList'
import api from '@/api/api'
export default {
  data() {
    return {
      currentId:'',
      pageType:'',
      scrollPosition: 0,
      folderTypeEnum: {
        1: '图片集收藏夹',
        0: '单图收藏夹',
        2: '短视频收藏夹',
        3: '未知类型收藏夹'
      },
      infoUrlEnum: {
          244: { url: '/game/', name: '游戏',pageType:'game'},
          22: { url: '/game/', name: '游戏',pageType:'game'},
          1: { url: '/work/', name: '作品' ,pageType:'work'},
          50: { url: '/video/', name: '短视频' ,pageType:'video'},
          9: { url: '/article/', name: '文章' ,pageType:'article'}
      },
      nextPageEnum: {
        '': '/',
        1: '/collection/games',
        0: '/collection/imgs',
        2: '/collection/videos'
      },
      tab: 1,
      showTjArea: false,
      isDataError: false,
      recommendhasMore: true,
      isloadingrecommend: true,
      recommendUserParam: {
        list: [],
        params: {
          isAsc: 'desc',
          orderByColumn: 'see',
          pageNum: 1,
          pageSize: 25
        }
      },
      recommends: [],
      isloading: true,
      hasMore: true,
      selectUserId: '',
      fans: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
      swpPage: 0,
      curFullPath: '',
      currentImgUrl: '',
      curImgId: '',
      showFav: false,
      curViewidx: 0,
      list: [],
      collectIds: [],
      showInfo: false,
      queryParams: {
        orderByColumn: 'create_time',
        isAsc: 'DESC',
        pageNum: 1,
        pageSize: 50,
        isBlogger: 0,
        isArticle: 1,
        follower: '',
        user_id: '',
        last: ''
      },
      folders: [],
      folderParams: {
        pageNum: 1,
        pageSize: 20
      },
      recommendFolderParam: {
        list: [],
        params: {
          isAsc: 'desc',
          orderByColumn: 'fans',
          pageNum: 1,
          pageSize:20
        }
      }
    }
  },
  components: {
    WaterfallFlowImgList, pswiper, Empty,gameInfo,articleInfo,workInfo
  },
  destroyed() {
    window.removeEventListener('scroll', this.docScroll);
  },
  activated() {
    window.addEventListener('scroll', this.docScroll);
    let that = this;
    this.$nextTick(() => {
      window.scrollTo(0, that.scrollPosition)
    });
  },
  deactivated() {
    window.removeEventListener('scroll', this.docScroll);
  },
  async mounted() {
    let token = window.localStorage.getItem('token')
    if (!token) {
      this.$parent.showLoginView = true;
      this.isloading = false;
      return;
    }
    // this.queryParams.follower = localStorage.getItem('userId');
    let that = this;
    this.curFullPath = this.$route.fullPath;

    let res = await api.myAttentions({ pageNum: 1, pageSize: 60, type: 0, currentUserId: localStorage.getItem('userId'), isAsc: 'desc', orderByColumn: 'createTime' });
    this.showTjArea = res.data.length == 0;
    res.data.map(u => {
      let item = u.blogger;
      let _vtime = null;
      if (item.updateTime) {
        _vtime = item.updateTime;
      } else if (item.createTime) {
        _vtime = item.createTime;
      } else if (item.create_time) {
        _vtime = item.create_time.replace('T', ' ');
      }
      _vtime = Math.abs(new Date(_vtime).getTime());
      u.lazy = {
        src: that.$imgdomainurl + 'avatar-' + item.id + '-' + _vtime + '@1x60.webp',
        error: require('@/assets/pro/default_sys_img.svg'),
        loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
      }
      let srcsets = [];
      srcsets.push(that.$imgdomainurl + 'avatar-' + item.id + '-' + _vtime + '@1x60.webp 1x');
      srcsets.push(that.$imgdomainurl + 'avatar-' + item.id + '-' + _vtime + '@2x60.webp 2x');
      srcsets.push(that.$imgdomainurl + 'avatar-' + item.id + '-' + _vtime + '@3x60.webp 3x');
      u.srcsets = srcsets.join(',')
    })
    this.fans = res.data;
    if (res.data.length == 0) {
      this.queryRecommends();
    }
    this.$nextTick(() => {
      if (that.$refs['refuserSwp'])
        that.$refs['refuserSwp'].init();
    })
    this.queryList()
  },
  methods: {
    toInfo(item) {
        
        // this.pageType=this.infoUrlEnum[item.categoryTopId].pageType;
        // this.currentId=item.id;
        // this.showInfo=true;
        let routeData = this.$router.resolve({ path: this.infoUrlEnum[item.categoryTopId].url + item.id });
        window.open(routeData.href, '_blank');
    },
    handleLoadingMoreRecommend() {
      if (this.tab == 1) {
        this.recommendUserParam.params.pageNum++;
      } else {
        this.recommendFolderParam.params.pageNum++;
      }
      this.queryRecommends()
    },
    docScroll(e) {

      this.scrollPosition = e.currentTarget.scrollY;
      let that = this;
      let jHeight = document.documentElement.scrollHeight - document.documentElement.scrollTop - document.documentElement.clientHeight;

      if (that.scrollLoaded == false) return;

      if (jHeight <= 200 && that.hasMore) {
        that.scrollLoaded = false;
        that.handleLoadingMore();
      }

      if (jHeight <= 50 && this.recommendhasMore && !this.hasMore) {
        if(that.tab==1){
          if(that.fans.length==0){
            that.scrollLoaded = false
            that.handleLoadingMoreRecommend();
          }
        }else{
            that.scrollLoaded = false
            that.handleLoadingMoreRecommend();
        }
      }
    },
    toFoldInfo(f) {
      if (!f.id) return;
      localStorage.setItem('FOL-BACK-P', this.$router.currentRoute.fullPath);
      this.$router.push({ path: this.nextPageEnum[f.type] + '/' + f.id })
      // let routeData = this.$router.resolve({ path: this.nextPageEnum[f.type] + '/' + f.id });

      // window.open(routeData.href, '_blank');
    },
    async handleFollowFolder(item) {
      if (item.isSubscribe == 0) {
        let res = await api.followFolder({ explorerId: item.id });
        // let res = await api.followFolder(item.id);
        if (res.code == 0) {
          item.isSubscribe = 1;
          this.$amessage.success('关注+1，灵感不断！');
        }
      } else {
        let res = await api.cancelFollowFolder({ explorerId: item.id });
        // let res = await api.cancelFollowFolder(item.id);
        if (res.code == 0) {
          item.isSubscribe = 0;
          this.$amessage.success('取关成功');
        }
      }

    },
    loadError(e) {
      e.target.removeAttribute('srcset');
    },
    async queryFollowFolders() {
      let that = this;
      let domainUrl = this.$imgdomainurl;
      let params = Object.assign({}, this.folderParams);
      this.isloading = true;
      params.isBlogger = 0;
      params.isAsc = 'desc';
      params.orderByColumn = 'createTime';
      params.type = 3;
      if (params.pageNum == 1) {
        this.folders = [{}, {}, {}, {}, {}, {}, {}, {}];
      }
      let res = await api.myAttentions(params);
      this.isloading = false;
      if (params.pageNum == 1) {
        this.folders = [];
      }
      res.data.map(item => {
        if (item.memberExplorer.collectList) {
          item.memberExplorer.collectList.map(f => {
            let _vtime = null;
            if (f.updateTime) {
              _vtime = f.updateTime;
            } else if (f.createTime) {
              _vtime = f.createTime;
            } else if (f.create_time) {
              _vtime = f.create_time.replace('T', ' ');
            }
            _vtime = Math.abs(new Date(_vtime).getTime());
            let srcsets = [];
            let pref = item.memberExplorer.type == 1 ? 'article-' + f.article.id : f.imageId;
            srcsets.push(domainUrl + pref + '-' + _vtime + '@1x408.webp 1x');
            srcsets.push(domainUrl + pref + '-' + _vtime + '@2x408.webp 2x');
            srcsets.push(domainUrl + pref + '-' + _vtime + '@3x408.webp 3x');
            f.srcsets = srcsets.join(',')
            f.lazy = {
              src: domainUrl + pref + '-' + _vtime + '@1x432.webp',
              error: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png'),
              loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
            }
          })
        }
      })
      this.folders = [...this.folders, ...res.data];

      this.scrollLoaded = true;
      let totalPage = res.total % params.pageSize == 0 ? res.total / params.pageSize : parseInt(res.total / params.pageSize) + 1
      if (res.data && (res.data.length < params.pageSize || params.pageNum >= totalPage)) {
        that.hasMore = false
      } else {
        that.hasMore = true
      }

      if (!that.hasMore) {
        if (that.tab == 1) {
          if (that.recommendUserParam.params.pageNum == 1) {
            that.queryRecommends();
          }
        } else if (that.tab == 2) {
          if (that.recommendFolderParam.params.pageNum == 1) {
            that.queryRecommends();
          }
        }
      }
    },
    chooseTab(_tab) {
      this.tab = _tab;
      this.list = [];
      this.queryParams.pageNum = 1;
      this.folderParams.pageNum = 1;
      this.hasMore = true;
      this.queryParams.last = '';
      this.recommends = [];

      this.recommendhasMore=true;
      this.recommendFolderParam.params.pageNum=1;
      this.recommendUserParam.params.pageNum=1;
      if (_tab == 2) {
        this.queryFollowFolders();
      } else {
        this.queryList();
      }
      window.history.pushState({}, 0, '/following?t=' + _tab);
    },
    handleSearch() {
      this.hasMore = true;
      this.list = [];
      this.isDataError = false;
      this.queryParams.pageNum = 1;
      this.queryList();
    },
    async handleFollow(item) {
      if (item.isSubscribe > 0) {
        let res = await api.cancelFollowTo(item.id);
        if (res.code == 0) {
          item.isSubscribe = 0;
          this.$amessage.success('已取消，有缘再见～')
        }
      }
      else {
        let res = await api.followTo(item.id);
        if (res.code == 0) {
          this.$bhelper.addCirRecord('FOLLOW');
          this.$store.dispatch('setLeftMenu', [])
          item.isSubscribe = 1;
          this.$amessage.success('关注+1，灵感不断！')
        }
      }
    },
    async queryRecommends() {
      let domainUrl = this.$imgdomainurl;
      let that = this;
      let res = {};
      this.isloadingrecommend = true;
      // const loading = this.$loading({
      //     lock: true,
      //     text: '努力加载中...',
      //     spinner: 'el-icon-loading',
      //     background: 'rgba(0, 0, 0, 0.7)'
      // });
      if (this.tab == 1) {
        let _params = Object.assign({}, this.recommendUserParam.params);
        if (_params.pageNum == 1) {
          this.recommends = [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]
        }
        res = await api.getRecommendUsers(_params);
        if (_params.pageNum == 1) {
          this.recommends = []
        }
        res.data.map(item => {
          let _vtime = null;
          if (item.updateTime) {
            _vtime = item.updateTime;
          } else if (item.createTime) {
            _vtime = item.createTime;
          } else if (item.create_time) {
            _vtime = item.create_time.replace('T', ' ');
          }
          _vtime = Math.abs(new Date(_vtime).getTime());
          item.lazy = {
            src: that.$imgdomainurl + 'avatar-' + item.id + '-' + _vtime + '@1x200.webp',
            error: require('@/assets/pro/default_sys_img.svg'),
            loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
          }
          let srcsets = [];
          srcsets.push(that.$imgdomainurl + 'avatar-' + item.id + '-' + _vtime + '@1x200.webp 1x');
          srcsets.push(that.$imgdomainurl + 'avatar-' + item.id + '-' + _vtime + '@2x200.webp 2x');
          srcsets.push(that.$imgdomainurl + 'avatar-' + item.id + '-' + _vtime + '@3x200.webp 3x');
          item.srcsets = srcsets.join(',')
        })
        this.recommends = [...this.recommends, ...res.data];
        this.recommendUserParam.total = res.total;

        let totalPage = res.total % _params.pageSize == 0 ? res.total / _params.pageSize : parseInt(res.total / _params.pageSize) + 1
        if (res.data && (res.data.length < _params.pageSize || _params.pageNum >= totalPage)) {
          that.recommendhasMore = false
        } else {
          that.recommendhasMore = true
        }
      }
      else if (this.tab == 2) {
        let _params = Object.assign({}, this.recommendFolderParam.params);
        if (_params.pageNum == 1) {
          this.recommends = [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]
        }
        if (this.layoutModel == 2) {
          _params.pageSize = 30;
        }
        res = await api.getRecommendFolders(_params);
        if (_params.pageNum == 1) {
          this.recommends = []
        }
        res.data.map(item => {
          if (item.collectList) {
            item.collectList.map(f => {
              let _vtime = null;
              if (f.updateTime) {
                _vtime = f.updateTime;
              } else if (f.createTime) {
                _vtime = f.createTime;
              } else if (f.create_time) {
                _vtime = f.create_time.replace('T', ' ');
              }
              _vtime = Math.abs(new Date(_vtime).getTime());
              let srcsets = [];
              let pref = item.type == 1 ? 'article-' + f.article.id : f.imageId;
              srcsets.push(domainUrl + pref + '-' + _vtime + '@1x432.webp 1x');
              srcsets.push(domainUrl + pref + '-' + _vtime + '@2x432.webp 2x');
              srcsets.push(domainUrl + pref + '-' + _vtime + '@3x432.webp 3x');
              f.srcsets = srcsets.join(',')
              f.lazy = {
                src: domainUrl + pref + '-' + _vtime + '@1x432.webp',
                error: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png'),
                loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
              }
            })
          }
        })
        this.recommends = [...this.recommends, ...res.data];

        let totalPage = res.total % _params.pageSize == 0 ? res.total / _params.pageSize : parseInt(res.total / _params.pageSize) + 1
        if (res.data && (res.data.length < _params.pageSize || _params.pageNum >= totalPage)) {
          that.recommendhasMore = false
        } else {
          that.recommendhasMore = true
        }
      }
      this.isloadingrecommend = false;
      // loading.close();

      this.scrollLoaded = true;
      this.isloaded = true;
    },
    toUserCenter(id) {
      this.$router.push({ path: '/user/' + id })
    },
    showAll() {
      this.queryParams.follower = localStorage.getItem('userId');
      this.queryParams.user_id = '';
      this.queryParams.last = '';
      delete this.queryParams.currentUserId;
      this.queryParams.isBlogger = 0;
      this.queryParams.pageNum = 1;
      this.selectUserId = '';
      this.hasMore = true;
      this.list = [];
      this.queryList();
    },
    chooseUser(user) {
      this.queryParams.user_id = user.id;
      this.queryParams.follower = '';
      this.queryParams.last = '';
      this.isDataError = false;
      delete this.queryParams.isBlogger;
      delete this.queryParams.currentUserId;
      this.selectUserId = user.id;
      this.queryParams.currentUserId = user.id;
      this.queryParams.pageNum = 1;
      this.hasMore = true;
      this.list = [];
      this.queryList();
    },
    onInfoClose() {
      window.history.pushState({}, 0, this.curFullPath);
      document.body.style.overflow = 'inherit';
      this.showInfo = false;
    },
    handleShowInfo(_item, _idx) {
      this.curViewidx = _idx;
      this.curImgId = _item.id;
      this.currentImgUrl = _item.content;
      window.history.pushState({}, 0, '/imgv/' + _item.id + '?imgurl=' + this.currentImgUrl);
      document.body.style.overflow = 'hidden';
      this.showInfo = true;
    },
    handleLoadingMore() {
      if (this.tab == 1) {
        this.queryParams.pageNum++;
        this.queryList();
      } else {
        this.folderParams.pageNum++;
        this.queryFollowFolders();
      }
    },
    calculateTilt(corners) {
      const { x: x1, y: y1 } = corners[0];//左上
      const { x: x2, y: y2 } = corners[1];// 右上
      // 计算 dy 和 dx
      const dy = y2 - y1;
      const dx = x2 - x1;
      //计算倾角(弧度->角度)
      const angle = Math.atan2(dy, dx) * (180 / Math.PI);
      // 返回角度
      return angle;
    },
    async queryList() {
      this.isloading = true;

      let params = Object.assign({}, this.queryParams);
      if (this.selectUserId) {
        params.bloggerId = this.selectUserId;
      } else {
        delete params.bloggerId;
      }
      if (params.pageNum == 1) {
        this.list = [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]
      }
      let that = this;

      delete params.follower;
      delete params.user_id;
      delete params.last;
      let res=await api.articleMemberList(params);
      if (params.pageNum == 1) {
        that.list = [];
      }
      that.isloading = false;
      if (res.data && (res.data.length < that.queryParams.pageSize || res.data.length == 0)) {
        that.hasMore = false
      } else {
        that.hasMore = true
      }
      let domainUrl=this.$imgdomainurl;
      res.data.map(item => {
          let _vtime=null;
          if(item.updateTime){
              _vtime=item.updateTime;
          }else if(item.createTime){
              _vtime=item.createTime;
          }else if(item.create_time){
              _vtime=item.create_time.replace('T',' ');
          }
          _vtime=Math.abs(new Date(_vtime).getTime());
          let srcsets=[];
          srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@1x800.webp 1x');
          srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@2x800.webp 2x');
          srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@3x800.webp 3x');
          item.srcsets=srcsets.join(',')
          item.lazy={
              src:domainUrl+'article-'+item.id+'-'+_vtime+'@1x800.webp',
              error: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png'),
              loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
          }
      })
      that.list=[...that.list,...res.data];
      setTimeout(()=>{
        that.scrollLoaded = true;
      },1000)

      if (!that.hasMore) {
        if (that.tab == 1) {
          if (that.recommendUserParam.params.pageNum == 1) {
            that.queryRecommends();
          }
        } else if (that.tab == 2) {
          if (that.recommendFolderParam.params.pageNum == 1) {
            that.queryRecommends();
          }
        }
      }
    }
  }
}
</script>

<style lang="less">
.following-page {
  display: inline-block;
  width: 100%;

  .games {
        display: flex;
        flex-wrap: wrap;
        grid-gap: 20px;

        .fav-d-item {
            width: calc((100% - 80px) / 5);
            min-height:260px;
            // height: 290px;
            // margin-right: 20px;
            // margin-bottom: 20px;
            // background: #171717;
            border-radius: 16px;
            overflow: hidden;
            position: relative;
            border: 2px solid transparent;
            animation: opacity .2s linear;

            .hid-el {
                // display: none;
                transition: 0.1s all linear;
                opacity: 0;
            }

            .select-btn {
                width: 20px;
                height: 20px;
                position: absolute;
                left: 10px;
                top: 10px;
                z-index: 1;
                background: url('../assets/pro/mutiple_select_pic.svg') no-repeat;
                background-size: cover;

                &.active {
                    background: url('../assets/pro/mutiple_selected_pic.svg') no-repeat;
                    background-size: cover;
                }
            }

            &:hover {

                border-color: #11CCB1;

                .img-flex-box {
                    img {
                        transform: scale(1.08);
                    }
                }

                .hid-el {
                    opacity: 1;
                }
            }

            &.create-btn {
                border: 2px dashed #424242;
                border-radius: 16px;
                transition: 0.1s all linear;

                a {
                    display: inline-block;
                    width: 100%;
                    height: 100%;
                    text-align: center;

                    .plus-icon {
                        width: 40px;
                        height: 40px;
                        border-radius: 40px;
                        background-color: #29272f;
                        display: block;
                        text-align: center;
                        line-height: 40px;
                        margin: 91px auto 18px auto;
                        background-image: url('../assets/pro/list_create_plusico.svg');
                        background-repeat: no-repeat;
                        background-size: 40px 40px;
                    }

                    .text {
                        font-size: 14px;
                        color: #fff;
                        font-weight: 500;
                    }
                }

                &:hover {
                    border-color: #fff;
                }
            }

            &.active {
                .select-btn {
                    opacity: 1;
                }
            }

            .img-flex-box {
                display: flex;
                align-items: center;
                position: relative;
                // height: 269px;
                overflow: hidden;
                border-radius: 16px;

                .lt-img {
                    width: 204px;
                    height: 210px;
                    margin-right: 6px;
                    border-radius: 16px;
                    overflow: hidden;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }

                .rt-img {
                    .next-img {
                        width: 102px;
                        height: 102px;
                        margin-bottom: 6px;
                        border-radius: 16px;
                        overflow: hidden;

                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }

                    .last-img {
                        width: 102px;
                        height: 102px;
                        border-radius: 16px;
                        overflow: hidden;

                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }
                }

                .main-img {
                    height:100%;
                    // height: 210px;
                    width: 100%;
                    // overflow: hidden;
                    position: relative;
                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }

                    .ops {
                        position: absolute;
                        top: 10px;
                        right: 10px;
                        display: none;
                        transition: .2s all linear;

                        a {
                            border-radius: 12px;
                            background: #FFFFFF;
                            width: 40px;
                            height: 40px;
                            transition: .2s all linear;

                            &:hover {
                                // opacity:.9;
                                background-color: #e1e1e1;
                            }
                        }

                        .i-del {
                            background-image: url('../assets/pro/i_del.png');
                            background-size: 22px 22px;
                            background-repeat: no-repeat;
                            background-position: center;
                            margin-right: 10px;
                        }

                        .i-edit {
                            background-image: url('../assets/pro/i_edit.png');
                            background-size: 22px 22px;
                            background-repeat: no-repeat;
                            background-position: center;
                        }
                    }
                }

                .author {
                    position: absolute;
                    bottom: 10px;
                    left: 9px;
                    background: rgba(255, 255, 255, 0.9);
                    border-radius: 12px;
                    padding: 10px 13px;
                    transition: 0.1s all linear;
                    width: 164px;
                    cursor: pointer;

                    &:hover {
                        background: rgba(255, 255, 255, 1);
                    }

                    .ar-tit {
                        font-size: 14px;
                        font-weight: 500;
                        color: #383737;
                        line-height: 20px;
                        margin-bottom: 5px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        background: url('../assets/pro/take_tit_icon.svg') no-repeat;
                        background-position: left center;
                        padding-left: 22px;
                    }

                    .u-box {
                        display: flex;
                        padding-left: 20px;

                        .name {
                            font-size: 14px;
                            color: #969696;
                            font-weight: 500;
                        }

                        .avatar {
                            width: 20px;
                            height: 20px;
                            border-radius: 20px;
                            margin-right: 7px;
                        }
                    }
                }

                .at-btn {
                    color: #fff;
                    font-size: 14px;
                    background-color: #11CCB1;
                    border-radius: 12px;
                    line-height: 44px;
                    background-image: url('../assets/pro/un_follow_ico.svg');
                    background-repeat: no-repeat;
                    background-position: 11px center;
                    // width:82px;
                    padding-left: 35px;
                    padding-right: 19px;
                    text-align: center;
                    position: absolute;
                    left: 10px;
                    top: 10px;
                }

                .ated-btn {
                    color: #383737;
                    font-size: 14px;
                    background-color: #fff;
                    border-radius: 12px;
                    line-height: 44px;
                    background-image: url('../assets/pro/cancel_follow_ico.svg');
                    background-repeat: no-repeat;
                    background-position: 11px center;
                    // width:82px;
                    padding-left: 35px;
                    padding-right: 19px;
                    text-align: center;
                    position: absolute;
                    left: 10px;
                    top: 10px;
                }

                .edit-btn {
                    color: #383737;
                    font-size: 14px;
                    background-color: #fff;
                    border-radius: 12px;
                    line-height: 44px;
                    width: 40px;
                    height: 40px;
                    text-align: center;
                    position: absolute;
                    right: 10px;
                    top: 10px;
                    background-image: url('../assets/pro/edit_ico.svg');
                    background-repeat: no-repeat;
                    background-position: center center;
                }

                .hid-el {
                    // display: none;
                    transition: .1s all linear;
                    opacity: 0;
                }

                &:hover {
                    .hid-el {
                        // display: inline-block;
                        opacity: 1;
                    }
                }
            }

            .bot-desc {
                font-size: 16px;
                display: flex;
                justify-content: space-between;
                margin-top: 9px;
                align-items: center;
                padding-right: 16px;

                .file-name {
                    color: #fff;
                    font-weight: 500;
                    padding-left: 15px;
                    font-size: 16px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    max-width: 80%;
                }

                .zan-num {
                    color: #969696;
                    background: url('../assets/pro/dianzanicon.svg') no-repeat;
                    padding-left: 24px;
                    font-size: 12px;
                    background-position: left center;
                }

                .type-text {
                    border: 1px solid #4B4B52;
                    border-radius: 2px;
                    color: #848393;
                    font-size: 12px;
                    padding: 0px 5px;
                    line-height: 18px;
                    white-space: nowrap;
                    margin-left: 30px;
                }
            }

            .bot-author {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding-left: 15px;
                margin-top: 11px;
                padding-bottom: 14px;
                padding-right: 16px;
                white-space: nowrap;
                .u {
                    display: flex;
                    align-items: center;

                    .img-box {
                        width: 20px;
                        height: 20px;
                        border-radius: 20px;
                        overflow: hidden;
                        margin-right: 6px;
                        display: flex;
                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }
                    .name{
                        display: flex;
                        align-items: center;
                    }
                    &:hover {
                        color: #11CCB1;
                    }
                }

                .like-num {
                    background: url('../assets/pro/icon_like2.svg') no-repeat;
                    background-position: left center;
                    background-size: 20px 20px;
                    padding-left: 22px;
                    line-height:20px;
                }
                .vnum{
                    background: url('../assets/pro/icon_like2.svg') no-repeat;
                    background-position: left center;
                    background-size: 20px 20px;
                    padding-left: 22px;
                    margin-left:20px;
                }
            }
        }
    }

  .atlas-layout-column {
    display: flex;
    flex-wrap: wrap;
    grid-gap: 20px;

    .fav-d-item {
      // width: 312px;
      width: calc((100% - 80px) / 5);
      // height: 368px;
      // margin-right: 20px;
      // margin-bottom: 20px;
      border-radius: 16px;
      overflow: hidden;
      position: relative;
      user-select: none;
      border-color: #171717;
      animation: opacity .2s linear;

      &.no-data {
        min-height: 368px;
        min-width: calc((100% - 80px) / 5);
        background: #171717;
      }

      &:hover {
        .top-b {
          border-color: #11CCB1;
        }
      }

      &:nth-child(5n) {
        // margin-right: 0px;
      }

      &.create-btn {
        border: 2px dashed #424242;
        border-radius: 16px;
        transition: 0.1s all linear;

        a {
          display: inline-block;
          width: 100%;
          height: 100%;
          text-align: center;

          .plus-icon {
            width: 40px;
            height: 40px;
            border-radius: 40px;
            background: #29272f;
            display: block;
            text-align: center;
            line-height: 40px;
            margin: 91px auto 18px auto;
          }

          .text {
            font-size: 14px;
            color: #fff;
            font-weight: 500;
          }
        }

        &:hover {
          border-color: #fff;
        }
      }

      .top-b {
        background: #171717;
        border-radius: 16px;
        height: 280px;
        border: 2px solid transparent;
        transition: .1s all linear;
        position: relative;
        overflow: hidden;
      }

      .img-flex-box {
        display: flex;
        align-items: center;
        position: relative;

        .lt-img {
          width: 204px;
          min-width: 204px;
          max-width: 204px;
          height: 210px;
          margin-right: 6px;
          border-radius: 16px;
          overflow: hidden;
          // border:1px solid red;
          background: #242327;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .rt-img {
          width: calc(100% - 204px - 6px);

          .next-img {
            width: 100%;
            height: 102px;
            margin-bottom: 6px;
            border-radius: 16px;
            overflow: hidden;
            background: #242327;

            // border:1px solid red;
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }

          .last-img {
            width: 100%;
            height: 102px;
            border-radius: 16px;
            overflow: hidden;
            background: #242327;

            // border:1px solid red;
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
        }

        .author {
          position: absolute;
          bottom: 10px;
          left: 9px;
          background: rgba(255, 255, 255, 0.9);
          border-radius: 12px;
          padding: 10px 13px;
          transition: 0.1s all linear;
          width: 164px;
          cursor: pointer;

          &:hover {
            background: rgba(255, 255, 255, 1);
          }

          .ar-tit {
            font-size: 14px;
            font-weight: 500;
            color: #383737;
            line-height: 20px;
            margin-bottom: 5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            background: url('../assets/pro/take_tit_icon.svg') no-repeat;
            background-position: left center;
            padding-left: 22px;
          }

          .u-box {
            display: flex;
            padding-left: 20px;

            .name {
              font-size: 14px;
              color: #969696;
              font-weight: 500;
            }

            .avatar {
              width: 20px;
              height: 20px;
              border-radius: 20px;
              margin-right: 7px;
            }
          }
        }

        .at-btn {
          color: #fff;
          font-size: 14px;
          background-color: #11CCB1;
          border-radius: 12px;
          line-height: 44px;
          background-image: url('../assets/pro/un_follow_ico.svg');
          background-repeat: no-repeat;
          background-position: 11px center;
          // width:82px;
          padding-left: 35px;
          padding-right: 19px;
          text-align: center;
          position: absolute;
          left: 10px;
          top: 10px;
        }

        .ated-btn {
          color: #383737;
          font-size: 14px;
          background-color: #fff;
          border-radius: 12px;
          line-height: 44px;
          background-image: url('../assets/pro/cancel_follow_ico.svg');
          background-repeat: no-repeat;
          background-position: 11px center;
          // width:82px;
          padding-left: 35px;
          padding-right: 19px;
          text-align: center;
          position: absolute;
          left: 10px;
          top: 10px;
        }

        .edit-btn {
          color: #383737;
          font-size: 14px;
          background-color: #fff;
          border-radius: 12px;
          line-height: 44px;
          width: 40px;
          height: 40px;
          text-align: center;
          position: absolute;
          right: 10px;
          top: 10px;
          background-image: url('../assets/pro/edit_ico.svg');
          background-repeat: no-repeat;
          background-position: center center;
        }

        .hid-el {
          // display: none;
          transition: 0.1s all linear;
          opacity: 0;
        }

        &:hover {
          .hid-el {
            // display: inline-block;
            opacity: 1;
          }
        }
      }

      .bot-desc {
        font-size: 16px;
        display: flex;
        justify-content: space-between;
        // margin-top: 14px;
        // padding-top:14px;
        line-height: 22px;
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
        align-items: center;
        background: #171717;
        margin-top: 10px;

        .file-name {
          color: #fff;
          font-weight: 500;
          padding-left: 15px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .file-num {
          color: #969696;
          margin-right: 13px;
          font-size: 14px;
          white-space: nowrap;
        }
      }

      .typename-box {
        padding-top: 6px;
        padding-left: 15px;
      }

      .type-name {
        line-height: 20px;
        font-size: 10px;
        padding: 0px 4px;
        border-radius: 3px;
        display: inline-block;
        position: relative;
        overflow: hidden;

        &:before {
          content: '';
          width: 100%;
          position: absolute;
          left: 0px;
          top: 0px;
          height: 100%;
        }

        &.ftp_1 {
          color: #725959;

          &:before {
            background: rgba(228, 36, 82, .14);
          }
        }

        &.ftp_0 {
          color: #726659;

          &:before {
            background: rgba(#E49424, .14);
          }
        }

        &.ftp_2 {
          color: #4A5A4B;

          &:before {
            opacity: 0.14;
            background: rgba(54, 228, 36, 0.54);
          }
        }

        i {
          font-style: normal;
          position: relative;
          font-size: 10px;
          width: 100%;
          text-align: center;
        }
      }

      .followed-btn {
        background: #29272F;
        color: #fff;
        width: 100%;
        line-height: 46px;
        border-radius: 8px;
        text-align: center;
        display: inline-block;
        font-size: 16px;
        margin-top: 10px;
      }

      .follow-btn {
        background: #11CCB1;
        color: #fff;
        width: 100%;
        line-height: 46px;
        border-radius: 8px;
        text-align: center;
        display: inline-block;
        font-size: 16px;
        margin-top: 10px;
        transition: .2s all linear;

        &:hover {
          background: #ab2646;
        }

        &.active {
          background: #29272F;

          &:hover {
            background: #232129;
          }
        }
      }
    }
  }

  .top-tabs {
    display: flex;
    align-items: center;
    font-size: 24px;
    color: #969696;
    grid-gap: 40px;
    margin-bottom: 24px;

    .tab {
      position: relative;
      transition: .2s all linear;

      &.active {
        color: #fff;
        font-size: 26px;

        &:after {
          content: '';
          height: 2px;
          width: 24px;
          position: absolute;
          bottom: -4px;
          background: #11CCB1;
          left: calc((100% - 24px) / 2);
        }
      }
    }
  }

  .users {
    display: flex;
    flex-wrap: wrap;
    grid-gap: 20px;

    .user-item {
      // margin-right: 20px;
      width: calc((100% - 80px) / 5);
      height: 382px;
      // background: #171717;
      border-radius: 16px;
      // text-align: center;
      padding-top: 40px;
      // margin-bottom: 20px;
      transition: .1s all linear;
      animation: opacity .2s linear;
      border: 2px solid transparent;
      display: flex;
      flex-direction: column;
      align-items: center;

      &:hover {
        border-color: #11CCB1;
      }

      .img-box {
        width: 100px;
        height: 100px;
        border-radius: 100px;
        overflow: hidden;
        display: inline-block;
        margin-bottom: 20px;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .name {
        font-size: 16px;
        font-weight: 500;
        line-height: 22px;
        display: block;
      }

      .nums {
        font-size: 14px;
        font-weight: 500;
        margin: 7px 0px 4px 0px;

        span {
          &:first-child {
            margin-right: 10px;
          }
        }
      }

      .addr {
        color: #969696;
        font-size: 14px;
        margin-bottom: 40px;
        line-height: 21px;
        height: 21px;
      }

      .stip {
        color: #969696;
        font-size: 14px;
      }

      .followed-btn {
        background: #29272f;
        color: #fff;
        width: 200px;
        line-height: 46px;
        border-radius: 8px;
        text-align: center;
        display: inline-block;
        font-size: 16px;
        margin-top: 13px;
      }

      .follow-btn {
        background: #11CCB1;
        color: #fff;
        width: 200px;
        line-height: 46px;
        border-radius: 8px;
        text-align: center;
        display: inline-block;
        font-size: 16px;
        margin-top: 13px;
        user-select: none;
        transition: .2s all linear;

        &:hover {
          background: #ab2646;
        }

        &.active {
          background: #29272f;
        }
      }
    }
  }

  .page-tit {
    line-height: 37px;
    font-size: 26px;
    color: #fff;
    margin-bottom: 26px;
    font-weight: 500;
  }

  .m-at-con-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;

    // height:108px;
    .ltr {
      display: flex;
      align-items: center;
      height: 108px;
      width: calc(100% - 90px + 13px);
      // border:1px solid red;
    }

    .cover-all {
      width: 64px;
      height: 64px;
      position: relative;
      margin-left: 5px;
      text-align: center;
      color: #fff;
      animation: opacity .2s ease-in;

      &.active {
        &:before {
          z-index: 1;
          position: absolute;
          left: 0;
          pointer-events: none;
          content: ' ';
          width: 100%;
          height: 100%;
          border-radius: 50%;
          background-color: rgba(0, 0, 0, 0.05);
          transition: background-color 0.2s ease-in-out;
          // content: '\5168\90e8';
          color: #fff;
          font-size: 16px;
          line-height: 64px;
          font-weight: 500;
          text-align: center;
          background: linear-gradient(173.76deg, rgba(255, 89, 103, 0.4) 3.85%, rgba(255, 89, 155, 0.4) 37.77%, rgba(255, 89, 104, 0.4) 95.07%);
          display: inline-block;
        }

        &:after {
          position: absolute;
          pointer-events: none;
          content: ' ';
          border-radius: 50%;
          border: 2px solid transparent;
          transition: all 0.15s ease-in-out;
          top: -4px;
          left: -4px;
          right: -4px;
          bottom: -4px;
          border: 2px solid #ff5967;
        }
      }

      &:not(.no-data).first-all {
        margin-right: 46px;

        &:before {
          content: "\5168\90E8";
          color: #fff;
          font-size: 16px;
          line-height: 64px;
          background-color: rgba(0, 0, 0, 0.4);
          position: absolute;
          z-index: 1;
          text-align: center;border-radius: 50%;
          left: 0;
          right: 0;
        }
      }

      .img-wrap {
        display: flex;
        flex-wrap: wrap;
        width: 64px;
        height: 64px;
        border-radius: 50%;
        overflow: hidden;
        position: relative;

        .f-img {
          width: 32px;
          height: 32px;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .text {
          font-weight: 500;
          color: #fff;
          font-size: 16px;
          position: absolute;
          height: 100%;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }

      &:not(.no-data):hover {
        &:after {
          position: absolute;
          pointer-events: none;
          content: ' ';
          border-radius: 50%;
          border: 2px solid transparent;
          transition: all 0.15s ease-in-out;
          top: -4px;
          left: -4px;
          right: -4px;
          bottom: -4px;
          border: 2px solid #ff5967;
        }

        &:before {
          z-index: 1;
          position: absolute;
          left: 0;
          pointer-events: none;
          content: ' ';
          width: 100%;
          height: 100%;
          border-radius: 50%;
          background-color: rgba(0, 0, 0, 0.05);
          transition: background-color 0.2s ease-in-out;
          content: '\5168\90e8';
          color: #fff;
          font-size: 16px;
          line-height: 64px;
          font-weight: 500;
          text-align: center;
          background: linear-gradient(173.76deg, rgba(255, 89, 103, 0.4) 3.85%, rgba(255, 89, 155, 0.4) 37.77%, rgba(255, 89, 104, 0.4) 95.07%);
        }
      }

      .title {
        line-height: 20px;
        margin-top: 6px;
        display: block;
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .mgr-at-btn {
      width: 66px;
      background: #29272f;
      font-size: 14px;
      text-align: center;
      color: #fff;
      border-radius: 8px;
      margin-left: 13px;
      line-height: 40px;
      min-width: 66px;
      transition: .2s all linear;

      &:hover {
        opacity: .8;
      }
    }

    .c-aten-datas {
      height: 100%;
      width: 100%;
      // border:1px solid red;
      width: calc((100% - 90px - 110px + 13px));
      // min-width:calc((100% - 110px - 66px - 24px - 66px));
      // max-width:calc((100% - 110px - 66px - 24px - 66px));
      // border:1px solid red;
      // max-width: 87%;
      // min-width: 87%;
      position: relative;
      margin-top: 16px;

      >div {
        height: 100%;

        .user-swp-wrap {
          height: 100%;
          position: static;

          .swiper-wrapper {
            align-items: center;
          }
        }
      }

      .atswiper {
        height: 90px;
        padding-top: 20px;
      }

      .li-cover-all {
        margin-right: 46px;
        width: 64px !important;
        text-align: center;

        margin-top: -18px;

        animation: opacity .2s ease-in;

        &:before {
          display: none;
        }

        .img-wrap {
          overflow: inherit;

          // width:64px;
          // height:64px;
          .avatar {
            width: 100%;
            height: 100%;
            border-radius: 64px;
          }

          .take-def {
            width: 24px;
            height: 24px;
            background: url('../assets/pro/at_def_ico.svg') no-repeat;
            background-size: cover;
            position: absolute;
            right: 0px;
            bottom: 0px;
            z-index: 1;
            transition: .2s all linear;

            &:hover {
              background: url('../assets/pro/at_def_hover_ico.svg') no-repeat;
              background-size: cover;
            }
          }

          .not-myfans-plus {
            width: 24px;
            height: 24px;
            background: url('../assets/pro/plus_friend_ico.svg') no-repeat;
            background-size: cover;
            position: absolute;
            right: 0px;
            bottom: 0px;
            z-index: 1;
          }
        }

        &:hover {
          cursor: pointer;

          &:before {
            content: ' ';
            display: inline-block;
          }

          .take-def {
            background: url('../assets/pro/at_def_take_to.svg') no-repeat;
          }
        }

        &.active {
          &:before {
            z-index: 1;
            position: absolute;
            left: 0;
            pointer-events: none;
            content: ' ';
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, 0.05);
            transition: background-color 0.2s ease-in-out;
            // content: '\5168\90e8';
            color: #fff;
            font-size: 16px;
            line-height: 64px;
            font-weight: 500;
            text-align: center;
            background: linear-gradient(173.76deg, rgba(255, 89, 103, 0.4) 3.85%, rgba(255, 89, 155, 0.4) 37.77%, rgba(255, 89, 104, 0.4) 95.07%);
            display: inline-block;
          }

          &:after {
            position: absolute;
            pointer-events: none;
            content: ' ';
            border-radius: 50%;
            border: 2px solid transparent;
            transition: all 0.15s ease-in-out;
            top: -4px;
            left: -4px;
            right: -4px;
            bottom: -4px;
            border: 2px solid #ff5967;
          }
        }

        .name {
          line-height: 20px;
          margin-top: 4px;
          display: block;
          font-size: 14px;
        }
      }

      .nobod {
        .img-wrap {
          &:after {
            display: none;
          }
        }

        &:after {
          display: none;
        }

        &:hover {
          &:after {
            position: absolute;
            pointer-events: none;
            content: ' ';
            border-radius: 50%;
            border: 2px solid transparent;
            transition: all 0.15s ease-in-out;
            top: -4px;
            left: -4px;
            right: -4px;
            bottom: -4px;
            border: 2px solid #ff5967;
            display: inline-block;
          }
        }
      }
    }
  }

  .sub-page-tit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 25px;

    .txt {
      font-size: 20px;
      color: #fff;
      font-weight: 500;
      line-height: 28px;
      margin-top: 25px;
      margin-bottom: 23px;
    }

    .filter-bx {
      display: flex;
      align-items: center;

      .seach-bx {
        width: 215px;

        input {
          background: #29272f;
          height: 40px;
          line-height: 40px;
          border-radius: 8px;
          border: none;
          padding-left: 36px;
          color: #fff;
          font-size: 14px;
          background-image: url('../assets/pro/header/search_icon.svg');
          background-repeat: no-repeat;
          background-position: 14px center;
          background-size: 16px 16px;
        }
      }
    }
  }

  .mk-rd-datas {
    .h-cover-ditem {
      width: 312px;

      .cover-box {
        display: flex;

        .mlft {
          width: 204px;
          min-width: 204px;
          height: 210px;
          border-radius: 16px;
          margin-right: 6px;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .mrt {
          .m-cover-bx {
            width: 102px;
            height: 102px;
            border-radius: 16px;
            overflow: hidden;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }

            &:first-child {
              margin-bottom: 6px;
            }
          }
        }
      }

      .u-bx {
        display: flex;
        align-items: center;
        margin-top: 8px;

        .avatar {
          width: 20px;
          height: 20px;
          object-fit: cover;
          margin-right: 7px;
          border-radius: 20px;
        }

        .name {
          font-size: 14px;
          color: #969696;
        }
      }
    }
  }
}
</style>